<template>
	<view @click="isMore = false">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
			<!-- 返回 -->
			<view class="back" @click="onBack">
				<view class="back-one" :class="{ action: PageScrollTop > 120 }">
					<text></text>
				</view>
			</view>
			<!-- tab切换 -->
			<view class="head-tab" v-if="PageScrollTop > 120">
				<view class="tab" :class="{'action':TabShow===0}" @click="onTab(0)">
					<text>商品</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===1}" @click="onTab(1)">
					<text>评价</text>
					<text class="line"></text>
				</view>
				<view class="tab" :class="{'action':TabShow===2}" @click="onTab(2)">
					<text>详情</text>
					<text class="line"></text>
				</view>
			</view>
			<!-- 分享更多 -->
			<view class="share-more">
				<view class="share-more-one" :class="{ action: PageScrollTop > 120 }">
					<view class="list">
						<text class="iconfont icon-share"></text>
					</view>
					<view class="list" @click.stop="isMore = !isMore">
						<text class="iconfont icon-diandian"></text>
					</view>
				</view>
				<view class="mroe-list" v-show="isMore">
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-xiaoxi"></text>
						</view>
						<view class="title">
							<text>消息</text>
						</view>
					</navigator>
					<navigator open-type="switchTab" url="/pages/home/home" class="list">
						<view class="icon">
							<text class="iconfont icon-home"></text>
						</view>
						<view class="title">
							<text>首页</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-guanzhu"></text>
						</view>
						<view class="title">
							<text>我的关注</text>
						</view>
					</navigator>
					<navigator class="list">
						<view class="icon">
							<text class="iconfont icon-zuji"></text>
						</view>
						<view class="title">
							<text>浏览记录</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- banner，标题 -->
		<view class="banner-title">
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000"
				 duration="500">
					<swiper-item v-for="(item, index) in pinKDesc.goods_carousel" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 价格 -->
			<view class="price-info" v-show="type==0">
				<view class="price">
					<text class="min">￥</text>
					<text class="max">{{pinKDesc.pink_price}}</text>
										<span style="font-size: 20rpx;color: #AAAAAA;text-decoration:line-through"><i>{{pinKDesc.price}}</i></span>
				</view>
<!-- 				<view class="info">
					<view class="list" @click="onAttention">
						<text class="iconfont" :class="AttentionShow===0?'icon-guanzhu-off':'icon-guanzhu-on action'"></text>
						<text>{{ goods.is_collection === 0 ? '关注' : '已关注' }}</text>
					</view>
				</view> -->
			</view>
			<!-- 限时抢购 -->
			<view class="flash-price" v-show="type==1">
				<view class="price-item">
					<view class="icon-item">
						<text class="iconfont icon-flash-sale"></text>
					</view>
					<view class="price">
						<view class="current-price">
							<text class="min">￥</text>
							<text class="max">{{pinKDesc.pink_price}}</text>
						</view>
						<view class="original-price">
							<text>{{pinKDesc.price}}</text>
						</view>
					</view>
					<view class="tag">
						<text class="iconfont icon-flash-naozhong"></text>
					</view>
				</view>
				<view class="time-item">
					<view class="title">
						<text>距结束还剩：</text>
					</view>
					<view class="time">
						<text class="num">02</text>
						<text class="dot">:</text>
						<text class="num">46</text>
						<text class="dot">:</text>
						<text class="num">52</text>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="goods-title">
				<text>{{pinKDesc.pink_name}}</text>
			</view>
			<view style="display: flex;justify-content: space-around;">
				<span style="">类型：{{pinKDesc.pink_people}}人团</span>
				<span style="">累积销量：{{pinKDesc.total_num}}</span>
				<span style="">限购：{{pinKDesc.quota_show}}</span>
			</view>
			<!-- 开通会员 -->
			<view class="dredge-vip">
				<view class="title">
					<text class="iconfont icon-vip"></text>
					<text>
						开通年卡会员预计估算优惠
						<text class="col">15.37</text>
						元
					</text>
				</view>
				<view class="dredge">
					<text>立即</text>
					<text>开通</text>
				</view>
			</view>
		</view>
		<!-- 优惠积分 -->
		<view class="goods-discounts">
			<view class="list">
				<view class="title">积分</view>
				<view class="content">
					<text>购买本商品可获得{{goods.integral}}积分</text>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="list" @click="$refs['GoodsServe']">
				<view class="title">服务</view>
				<view class="content">
					<view class="serve">
						<text class="iconfont icon-baozheng"></text>
						<text>退款保证</text>
					</view>
					<view class="serve">
						<text class="iconfont icon-baozheng"></text>
						<text>物流配送</text>
					</view>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
		</view>
		<!-- 属性规格 -->
		<view class="goods-discounts">
			<view class='playWay'>
				<view class='title acea-row row-between-wrapper'>
					<view>拼团玩法</view>
					<!-- <navigator hover-class='none' class='font-color' url='/pages/Activity/goods_combination_rule/index'>查看规则<text class="iconfont icon-jiantou"></text></navigator> -->
				</view>
				<view class='way acea-row row-middle' style="display: flex;">
					<view class='item'>
						<text class='num'>①</text>
						<text>开团/参团</text>
					</view>
					<view class='iconfont icon-arrow'></view>
					<view class='item'>
						<text class='num'>②</text>
						<text>邀请好友</text>
					</view>
					<view class='iconfont icon-arrow'></view>
					<view class='item'>
						<view>
							<text class='num'>③</text>
							<text>满员发货</text>
						</view>
						<!-- <view class='tip'>不满自动退款</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="evaluate-data" ref="evaluate">
			<view class="title-more" @click="onEvaluate">
				<view class="title">
					<text>评价</text>
					<text class="num">999+</text>
				</view>
				<view class="more">
					<text class="iconfont icon-more"></text>
				</view>
			</view>
			<view class="evaluate-list">
				<view class="user-info">
					<view class="thumb">
						<image src="/static/img/user_pic.jpg" mode=""></image>
					</view>
					<view class="nickname-grade">
						<view class="nickname">
							<text>爱笑的汤姆</text>
						</view>
						<view class="grade">
							<text class="cuIcon-favorfill lg text-gray"></text>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="character">
						<text class="two-omit">搭建啊激动了阿建档立卡点击就阿卡丽登记卡加端口几啊开了都金坷垃就恐龙当家哦架空</text>
					</view>
					<view class="attr">
						<text>蓝色</text>
					</view>
					<view class="thumb-list">
						<view class="list">
							<image src="/static/img/goods_banner_01.webp" mode=""></image>
						</view>
						<view class="list">
							<image src="/static/img/goods_banner_02.webp" mode=""></image>
						</view>
						<view class="list">
							<image src="/static/img/goods_banner_03.webp" mode=""></image>
						</view>
					</view>
				</view>
				<view class="look-all" @click="onEvaluate">
					<text>查看全部评价</text>
				</view>
			</view>
		</view>
		<!-- 排行榜 -->
		<view class="ranking-list">
			<view class="ranking-title">
				<view class="title">排行榜</view>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item, index) in 6" :key="index">
					<view class="thumb">
						<image :src="'/static/img/goods_thumb_0'+(index+1)+'.png'"></image>
					</view>
					<view class="title">
						<text class="two-omit">美连诚雪纺连衣裙 2020新款女夏裙子波点气质沙滩裙仙气时尚女装休闲衣服大码女装 白底红点 M</text>
					</view>
					<view class="price">
						<text>￥121.00</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品介绍 -->
		<view class="products-introduction" ref="products">
			<view class="title">
				<text>商品介绍</text>
			</view>
			<view class="content" v-html="web_content"></view>
		</view>
		<!-- 底部 -->
		<view class="page-footer">
			<view class="footer-fn">
				<view class="list" @click="toTalk">
					<text class="iconfont icon-kefu"></text>
					<text >联系客服</text>
				</view>
				<view class="list" @click="">
					<text class="iconfont"></text>
					<text>首页</text>
				</view>
			</view>
			<view class="footer-buy">
				<view class="cart-add" @click="$refs['PinkNum'].show(1)">
					<text>单独拼团</text>
				</view>
				<view class="buy-at" @click="$refs['PinkNum'].show(2)">
					<text>立即团购</text>
				</view>
			</view>
		</view>
		<!-- pinKDesc.quota_show -->
		<pink-num  :stock="pinKDesc.pink_sku_stock" :peopleQuota="pinKDesc.pink_people" :buyNumQuota="pinKDesc.quota" :image="pinKDesc.goods_img" :skuId="pinKDesc.goods_sku_id" :pinkPrice='pinKDesc.pink_price' ref="PinkNum"></pink-num>
	</view>
</template>

<script>
	import PinkNum from '../../../components/PinkNum/PinkNum.vue';
	export default {
		components: {
			PinkNum
		},
		data() {
			return {
				goods: [],
				TabShow: 0,
				isMore: false,
				AttentionShow: 0,
				swiperList: [],
				web_content: '<div class="m-img"><img src="https://zhedplus.oss-cn-hangzhou.aliyuncs.com/content_img/20191118/1fb5ff162f25fd4c7383bd998ff2fde9.jpg"><div class="tools" hidden><i class="fa fa-arrow-up move-up"></i><i class="fa fa-arrow-down move-down"></i><em class="move-remove" hidden ><i class="fa fa-times" aria-hidden="true"></i> 移除</em><div class="cover"></div></div></div>',
				PageScrollTop: 0,
				type:1,
				//详情
				pinKDesc:[],
				//评论统计
				commont:0,
			};
		},

		onLoad(params) {
			//调用查询详情方法
			let pinkId =params.pinkId
			this.pinkDesc(pinkId);
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
		methods: {
			open(){
				let a =this.$refs.PinkNum;
				console.log(a)
			},
			//单独购买 拼团单独购买
			goPay(e){
				let skuIds = e;
				let order_type_code = 5;
				uni.navigateTo({
					url:'/pages/ConfirmOrder/ConfirmOrder?'+'skuIds='+skuIds+'&order_type_code='+order_type_code
				})
				
			},
			//拼团购买
			goPink(e){
				let skuIds = e;
				let order_type_code = 2;
				uni.navigateTo({
					url:'/pages/ConfirmOrder/ConfirmOrder?'+'skuIds='+skuIds+'&order_type_code='+order_type_code
				})
			},
			//加载详情
			pinkDesc(pinkId) {
				this.$http.get('pink/Desc', {
					pink_id: pinkId
				}, {}).then(res => {
					console.log(res.data.data);
					this.pinKDesc = res.data.data;
				});
			},
			/**
			 * 返回
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * tab
			 */
			onTab(type) {
				this.TabShow = type;
				switch (type) {
					case 0:
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
						break;
					case 1:
						uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
					case 2:
						uni.createSelectorQuery().select(".products-introduction").boundingClientRect((data) => { //data - 各种参数
							uni.pageScrollTo({
								scrollTop: this.PageScrollTop + data.top - 50,
								duration: 300
							});
						}).exec()
						break;
				}
			},
			//去客服
			toTalk() {
				uni.navigateTo({
					url:"/pages/CustomerService/CustomerService",
				})
			},
			/**
			 * 去购物车
			 */
			onToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},

			/**
			 * 关注点击
			 */
			onAttention() {
				if (this.goods.is_collection === 0) {
					this.goods.is_collection = 1;
					uni.showToast({
						title: '关注成功',
						icon: 'none'
					})
				} else {
					this.goods.is_collection = 0;
					uni.showToast({
						title: '取消成功',
						icon: 'none'
					})
				}

			},
			/**
			 * 评价点击
			 */
			onEvaluate() {
				uni.navigateTo({
					url: '/pages/GoodsEvaluateList/GoodsEvaluateList'
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'PinkGoodsDetails.scss';
</style>
